<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://cdn.tailwindcss.com"></script>
    <title>Email_Subscribe</title>
  </head>
  <body>
    <!-- Background Container -->
    <div class="flex justify-center items-center h-screen bg-zinc-700">
      <!-- Card -->
      <div class="bg-zinc-800 p-2 mx-6 rounded-2xl">
        <!-- Flex Container -->
        <div class="flex flex-col md:flex-row rounded-l-xl">
          <!-- Image -->
          <img
            src="./images/image.jpg"
            alt=""
            class="rounded-xl h-80 md:h-64 md:rounded-r-none transform hover:scale-105 hover:rounded-xl duration-200"
          />
          <!-- Content -->
          <div class="p-6 md:p-12">
            <h2 class="font-serif font-medium text-xl text-white text-center md:text-left">
              Get diet and fitness tips in your inbox
            </h2>
            <!-- leading 行高 -->
            <!-- tracking 字母间距 -->
            <p class="max-w-xs text-xs text-white text-center md:text-left my-4 leading-5 tracking-wide">
              Eat better and exercise better. Sign up for the Diet&Fitness news letter.
            </p>
            <div class="flex flex-col mt-5 space-y-4 md:space-x-3 md:flex-row md:space-y-0">
              <input
                type="text"
                class="p-2 text-center text-white bg-zinc-800 border border-zinc-600 placeholder:text-xs md:placeholder:text-left md:text-left focus:outline-none"
                placeholder="Enter Your Email Address"
              />
              <button
                class="px-5 py-3 text-xs rounded-md text-zinc-800 bg-lime-500 hover:bg-lime-700 hover:text-white duration-500"
              >
                Subcribe
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>
